<!--
 * @Author: MrLee
 * @Date: 2024-08-23 23:14:31
 * @LastEditors: MrLee
 * @LastEditTime: 2024-09-12 15:14:50
 * @Description: 请填写简介
-->
<template>
  <view class="rounded-[20rpx] bg-#fff pl-[24rpx] pr-[24rpx]">
    <up-cell-group :border="false">
      <up-cell v-for="(item, index) in userInfoList" :key="index" :title="item.title" :arrow="false" :center="true"
        :title-style="titleStyle" @click="handleClick(item)">
        <template #title>
          <view :class="className">{{ item.title }}</view>
          <view :class="className" class="mt-20rpx">{{ item.titleInfo }}</view>
        </template>
        <template #right-icon>
          <view class="flex items-center justify-center">
            <view v-if="item.valueType === 'img'">
              <image class="h-[66rpx] w-[66rpx] rounded-[50%]" :src="item.value" mode="aspectFill"
                @click="uploadFiles" />
            </view>

            <view v-if="item.valueType === 'text'" class="font-26rpx text-[30rpx] text-[#999999]"
              @click="actionTmp(item)">
              {{ item.value }}
            </view>
            <!--            时间用的-->
            <view v-if="item.valueType === 'date'">
              <view @click="openDate = true">{{item.value}}</view>
              <up-datetime-picker :show="openDate" v-model="item.value" mode="date" format="YYYY-MM-DD"
                @cancel="openDate = false" @confirm="changeDate(item)"></up-datetime-picker>
            </view>
            <view>
              <!--              时间范围-->
              <view v-if="item.valueType === 'dateRang'">
                <view @click="showTime1 = true">{{item.value}}</view>
                <up-datetime-picker :show="showTime1" v-model="time1" mode="date" @confirm="confirmTime1"
                  @cancel="showTime1 = false"></up-datetime-picker>
                <up-datetime-picker :show="showTime2" v-model="time2" mode="date" @confirm="confirmTime2"
                  @cancel="showTime1 = false"></up-datetime-picker>
              </view>
            </view>
            <!--            城市用的-->
            <view v-if="item.valueType === 'city'">
              <!--              <view @click="cityShow = true">{{item.value}}</view>-->
              <!--           <view class="" v-if="item.title=='籍贯'">
                <Region class="box" :arr="item.value" @region="resgclick" :regionColor="'#999999'" />
              </view> -->
              <!-- <view class="" v-else> -->
              <Region class="box" :arr="item.label" @region="resgclick" :regionColor="'#999999'" />
              <!-- </view> -->
            </view>
            <!--            单选用的-->
            <view v-if="item.valueType === 'select'">
              <view @click="selectValue(item)">{{item.title=='性别'?item.value:item.label}}</view>
              <multiple-picker v-if="selectTitle === item.title" title="" :show="selectShow"
                :columns="item.selectOptions" :defaultIndex="item.value" :label="item.title"
                @cancel="selectShow = false" @confirm="changeSelect"></multiple-picker>
            </view>
            <!--            多选-->
            <view v-if="item.valueType === 'selectMultiple'">
              <view @click="selectValue2(item)">{{item.label}}</view>
              <multiple-picker2 v-if="selectTitle2 === item.title" :title="item.title" :show="selectShow2"
                :columns="item.selectOptions" :defaultIndex="item.value" :label="item.label"
                @cancel="selectShow2 = false" @confirm="changeSelect2"></multiple-picker2>
            </view>
            <view class="flex items-center" v-if="item.valueType === 'myRadio'">
              <!--              <view class="py-12rpx px-36rpx bg-#f7f7f8 text-[#1D2129] text-[28rpx] rounded-[32rpx] mr-24rpx">全职</view>-->
              <view class="py-12rpx px-36rpx mx-2 text-[28rpx] rounded-[32rpx]"
                :class="itec.value === radioIndex ? 'bg-#1f50f2 text-[#fff]' : 'bg-#f7f7f8 text-[#1D2129]'"
                v-for="(itec, index) in item.radioOptions" @click="selectRadio(itec, item.title)">
                {{itec.label}}
              </view>
            </view>
            <up-switch v-if="item.valueType === 'switch'" v-model="item.value" active-color="#1F50F2" />
            <up-input v-if="item.valueType === 'input'" v-model="item.value" :border="false" :search="item.search"
              :custom-style="customStyle" placeholder-class="placeholderClass" input-align="right" placeholder="请输入"
              @change="change" />
            <view @click="actionTmp(item)" v-if="rigthIco && item.rigthIco"
              class="iconfont icon-youjiantou ml-[10rpx]" />
          </view>
        </template>
        <template #label>
          <view v-if="['textarea', 'file'].includes(item.valueType)" class="mt-20rpx">
            <up-textarea v-if="item.valueType === 'textarea'" :placeholder="item.placeholder" v-model="item.value" />
            <up-upload v-if="item.valueType === 'file'" :file-list="item.value" name="3" :max-count="10"
              :preview-full-image="true" @after-read="afterRead" @delete="deletePic" />
          </view>

          <view v-if="item.valueType == 'selects'" class="min-h-96rpx flex py-30rpx justify-between items-center">
            <view v-for="(itec,indec) in item.selectInfo" :key="indec"
              class="w-25% flex shrink-0 flex-col items-center justify-start">
              <view class="mb-30rpx flex items-center justify-center text-[26rpx] text-[#333333] leading-[36rpx]"
                @click="actionTmp(itec)">
                <text class="mr-10rpx" :class="className">
                  {{ itec.label }}
                </text>
                <up-icon name="arrow-down-fill" size="16rpx" color="#999999" :class="className" />
              </view>
              <view class="h-[36rpx] text-[26rpx] text-[#999999] font-medium" :class="className"
                v-if="itec.type === 'input'">
                <u-input v-model="itec.value" placeholder="请输入" style="border: none; color: #999"></u-input>
              </view>
              <view class="h-[36rpx] text-[26rpx] text-[#999999] font-medium" :class="className" v-else>
                {{ itec.value || '请选择' }}
              </view>
            </view>
          </view>
        </template>
      </up-cell>
    </up-cell-group>
  </view>
</template>

<script setup>
  import Region from "@/pages/components/infocard/qc-region.vue";
  import multiplePicker from "@/pages/components/infocard/multiple-picker.vue";
  import multiplePicker2 from "@/pages/components/infocard/multiple-picker2.vue";
  import moment from 'moment'
  let openDate = ref(false);
  let cityShow = ref(false);
  let selectShow = ref(false);
  let radioIndex = ref(0);
  let selectTitle = ref('');
  let props = defineProps({
    userInfoList: {
      type: Array,
      default: () => [],
    },
    rigthIco: {
      type: Boolean,
      default: true,
    },
    className: {
      type: String,
      default: () => '',
    }
  });
  const emit = defineEmits(['actionTmp', 'selectSchool']);

  const showTime1 = ref(false);
  const showTime2 = ref(false);
  const time1 = ref(Date.now());
  const time2 = ref(Date.now());
  const confirmTime1 = (e) => {
    time1.value = e.value
    showTime1.value = false
    showTime2.value = true
  };
  const confirmTime2 = (e) => {
    time2.value = e.value
    // showTime1.value=false
    showTime2.value = false
    props.userInfoList.map(v => {
      if (v.valueType === 'dateRang') {
        v.value = dateFormat(time1.value) + '-' + dateFormat(time2.value)
        v.label = dateFormat(time1.value) + '-' + dateFormat(time2.value)
        console.log('v::----:', v)
      }
    })
  };
  const dateFormat = (time) => {
    if (!time) {
      return ""
    }
    let date = new Date(time);
    let year = date.getFullYear();
    // 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
    let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    return year + "." + month + "." + day;
  }

  const changeDate = (item) => {
    console.log(item)
    item.value = moment(item.value).format('YYYY-MM-DD')
    openDate.value = false
  }

  const selectValue = (item) => {
    selectShow.value = true
    selectTitle.value = item.title
  }
  let selectShow2 = ref(false);
  let selectTitle2 = ref('');
  const selectValue2 = (item) => {
    console.log('点了即将打开', selectShow2.value)
    console.log('item--------', item)
    selectTitle2.value = item.title
    selectShow2.value = true
  }
  const changeSelect = (value) => {
    console.log('选择返回---', value)
    props.userInfoList.forEach(v => {
      if (v.title === value.title) {
        v.value = value.value
        v.label = value.label
        selectShow.value = false
      }
    })
    console.log('props.userInfoList---', props.userInfoList)
    if (value.title === '学校名称') {
      emit('selectSchool', {
        school_id: value.value
      })
    }
    if (value.title === '学院') {
      emit('selectYuanXiao', {
        college_id: value.value
      })
    }
  }
  const changeSelect2 = (value) => {
    selectShow2.value = false
    //重置一下
    props.userInfoList.map(vi => {
      if (vi.title === value.title) {
        vi.value = '请选择'
        vi.label = '请选择'
      }
    })
    props.userInfoList.map(vi => {
      if (vi.title === value.title) {
        vi.selectOptions.map(item => {
          if (item.selected) {
            if (vi.value === '请选择') {
              vi.value = item.value
              vi.label = item.label
            } else {
              vi.label += ',' + item.label
              vi.value += ',' + item.value
            }
          }
        })
      }
    })
    console.log('----------------', value, props.userInfoList)
  }

  const selectRadio = (itec, title) => {
    console.log(itec, title)
    radioIndex.value = itec.value
    props.userInfoList.forEach(v => {
      if (v.title === title) {
        v.value = itec.value
        v.label = itec.label
      }
    })
  }

  const deletePic = (event) => {
    console.log('删除')
    props.userInfoList.map(v => {
      if (v.valueType === 'file') {
        v.value.splice(event.index, 1)
      }
    })
  }

  const afterRead = (event) => {
    console.log('afterRead', event)
    uni.uploadFile({
      url: 'https://yiliao.test03.qcw800.com/api/common/upload', // 仅为示例，非真实的接口地址
      filePath: event.file.url,
      name: 'file',
      success: (res) => {
        let data = JSON.parse(res.data)
        props.userInfoList.map(v => {
          if (v.valueType === 'file') {
            v.value.push({
              url: data.data.url
            })
          }
        })
      }
    });
  }


  const resgclick = (ele) => {
    props.userInfoList.map((v, i) => {
      if (v.valueType === 'city') {
        console.log('--------进来了', ele)
        props.userInfoList[i].label = [ele[0].name, ele[1].name].join(' ')
        props.userInfoList[i].value = [ele[0].code, ele[1].code].join(',')
        console.log('城市', props.userInfoList[i])
      }
    })
    // this.info.region_id = `${ele[2].code}`
  };
  const titleStyle = reactive({
    fontSize: '30rpx',
    fontWeight: 500,
    color: '#1d2129',
  });
  const customStyle = reactive({
    paddingRight: '0',
  });

  const handleClick = (item) => {
    if (item.url) {
      uni.navigateTo({
        url: item.url,
      });
    }
  };

  const uploadFiles = () => {
    uni.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log('res', res)
        uni.uploadFile({
          url: 'https://yiliao.test03.qcw800.com/api/common/upload', // 仅为示例，非真实的接口地址
          filePath: res.tempFilePaths[0],
          name: 'file',
          success: (res) => {
            let data = JSON.parse(res.data)
            props.userInfoList.map(v => {
              if (v.valueType === 'img') {
                v.value = data.data.url
              }
            })
          }
        });
      }
    })
  }
  const actionTmp = (params) => {
    emit('actionTmp', params)
  }
</script>

<style>
  .placeholderClass {
    font-size: 26rpx;
    color: red;
  }
</style>
